import { ReactSortable } from "react-sortablejs";

import useCodeStore from '@/store/code';

export function CodeSorter() {

  const { sorter, setSorter } = useCodeStore()

  if (typeof window === "undefined") return null
  if (sorter.length === 0) return null

  return (
    <>
      <ReactSortable
        list={sorter}
        setList={setSorter}
      >
        {sorter.map((item) => (
          <div className="listgroup-item" key={item.id}>#{item.id} | {item.code}</div>
        ))}
      </ReactSortable>
    </>
  )
}